<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav flex-justify-start">
      <span @click="fn.back()" class="mui-action-back"
        ><img class="back-btn" src="../../../static/images/back.png"
      /></span>
      <h1 class="mui-title">消息-{{ title }}</h1>
    </header>
    <div class="mui-page-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll mui-scroll-wrapper">
          <div id="work-message" class="mui-active mui-scroll-wrapper">
            <div class="work-message-lists mui-scroll-wrapper">
              <cube-scroll
                ref="scroll"
                :options="options"
                @pulling-up="onPullingUp"
              >
                <cube-swipe>
                  <transition-group name="swipe" tag="div">
                    <div
                      class="work-message-item"
                      v-for="(data, index) in newsLists"
                      :key="data.msgId"
                    >
                      <cube-swipe-item
                        class="swiper-no-swiping"
                        ref="swipeItem"
                        :index="index"
                        @btn-click=""
                      >
                        <div @click="detail(data)">
                          <div
                            class="flex-between-center work-message-item-header"
                          >
                            <h3 class="flex-center">
                              <b v-if="isRead(data.isRead)">·</b
                              >{{ data.category }}
                            </h3>
                            <p class="msg-date">
                              {{ fn.formatHM(data.createTime) }}
                            </p>
                          </div>
                          <div class="work-message-item-title">
                            <h5 class="mui-ellipsis-2">
                              <b class="text-red" v-if="isRead(data.isRead)"
                                >·</b
                              >{{ data.content }}
                            </h5>
                            <!--   <p class="mine-lists-tips">时间：{{data.createTime}}</p>-->
                          </div>
                          <div class="flex-between-center message-details">
                            <p>查看详情</p>
                            <span class="mui-icon mui-icon-arrowright"></span>
                          </div>
                        </div>
                      </cube-swipe-item>
                    </div>
                  </transition-group>
                </cube-swipe>
                <!-- <div class="text-center no-data" v-if="newsLists.length === 0">
                  <img src="../../../static/images/no_data.png" alt="" />
                  <p>暂无数据</p>
                </div> -->
                <!-- W noData -->
                <noData v-if="newsLists.length === 0"></noData>
                <onBottom v-else-if="onBottom"></onBottom>
              </cube-scroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import footerbar from "@/components/layout/footerbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";
export default {
  components: {
    footerbar,
  },
  name: "newsLists",
  data() {
    return {
      fn: tools,
      tabIndex: 0,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      newsLists: [],
      infinite: true,
      pageIndex: 0,
      pageSize: 10,
      noData: true,
      sortField: "CREATE_TIME_",
      sortOrder: "DESC",
      title: "",
      category: "",
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    detail(data) {
      // 消息：现在分为系统消息，组织生活的消息，党务公开，党员学习，之后还有党费缴纳的消息。系统消息查看详情是消息的详情，组织生活消息，党务公开，党员学习，党费缴纳，这几个点击详情都是到对应的会议或者党务公开详情。党员学习，党费缴纳的详情，接口还没有;党务公开的消息，点详情是到党务公开的详情
      // 对各种类型的消息定义路由名称
      let routeNamesMap = {
        // 系统消息
        0: "scheduleDetail",
        // 党务公开
        //          '10': 'newsDetails',
        // 党员学习
        11: "msgDetail",
        // 组织生活
        //          '1': 'scheduleDetail',
      };
      this.readMsg(data.msgId);
      if (routeNamesMap[this.category]) {
        let id = data.businessId;
        this.$store.state.msgData = data;
        return this.$router.push({
          path: `/${routeNamesMap[this.category]}/${id}`,
        });
      }
      if (this.category === "1" && data.businessId) {
        this.$router.push({ path: `/scheduleDetail/${data.businessId}` });
      } else if (this.category === "10" && data.businessId) {
        let userInfo = this.$store.state.userInfo || {};
        let param = {
          affarisId: data.businessId,
          partyMemberId: userInfo.partyMemberModel.id,
        };
        loginService.getPartyAffairsInfo(param).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message);
          }
          if (res.data.attachmentList === null) {
            res.data.attachmentList = [];
          }
          this.$store.state.affairsData = res.data;
          this.$router.push({ path: `/newsDetails/${data.businessId}/1` });
        });
      }
    },
    // 设置已读消息
    readMsg(msgId) {
      loginService.setMsgToRead(msgId);
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    loadData() {
      this.category = this.$route.params.category;
      this.title = this.$route.params.key;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        category: this.category,
        sortField: this.sortField,
        sortOrder: this.sortOrder,
      };
      loginService.getSysNotice(data).then((res) => {
        if (res.code !== 200 || res.data.length < 1) {
          this.$refs.scroll.forceUpdate();
          return tools.tip(res.total === 0 ? "暂无数据" : "已无更多数据");
        }
        this.pageIndex++;
        this.newsLists = this.newsLists.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = !true;
        }, 100);
      });
    },
    isRead(isRead) {
      if (isRead === "yes") {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped>
</style>
